/* ****************************** Formulario ****************************** */
@import url('https://fonts.googleapis.com/css?family=Poppins');
body{   
	font-family: 'Poppins', sans-serif;
	font-weight: lighter;
	font-size: 16px;
	overflow-x: hidden;
	background-color: #45767b;
}

/********** global **********/

#wait{
	background: rgba(50, 50, 50, 0.3);
    width: 100vw;
    height: 100vh;
    display: none;
    top: 0;
    position: fixed;
    z-index: 1000;
}

#wait div{
	position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

a:hover,a:focus {
	text-decoration:none;
}

.custom-button{
	outline: none;
	border: none;
	display: block;
	cursor: pointer;
	font-weight: 300;
	border-radius: 10px;
	-webkit-box-shadow: 10px 10px 5px -5px rgba(219,219,219,0.1);
	-moz-box-shadow: 10px 10px 5px -5px rgba(219,219,219,0.1);
	box-shadow: 10px 10px 5px -5px rgba(219,219,219,0.1);
	height: 35px;
	color: #fff;
	min-width: 130px;
	margin-bottom: 10px;
}

.custom-button:focus {
	outline: 0;
}

.single-category-margin{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}

.category-button{
	width: 200px;
	height: 150px;
	background: linear-gradient(to bottom right, rgb(50, 102, 119), #38414c);
}

.product-button{
	background: linear-gradient(to bottom right, rgb(32, 199, 184), #2d716e);
}

.delete-button{
	background: linear-gradient(to bottom right, rgb(195, 24, 24), #c12020);
}

.update-button{
	background: linear-gradient(to bottom right, rgb(27, 163, 208), #205494);
}

.cancel-button{
	background: linear-gradient(to bottom right, rgb(167, 167, 167), #5d5d5d);
}

.success-button{
	background: linear-gradient(to bottom right, rgb(27, 208, 33), #209434);
}

.flex-container{
	display: flex;
	flex-wrap: wrap;
	margin-left: -6px;
	margin-right: -6px;
}

.m-t-5{
	margin-top: 5rem;
}

/********** navbar **********/
.icon-sidebar {
	position: relative;
	display: table-cell;
	width: 60px;
	height: 36px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;
}

.main-menu:hover,nav.main-menu.expanded {
	width:250px;
	overflow:visible;
}

.main-menu {
	background:#212121;
	border-right:1px solid #e5e5e5;
	position: fixed;
	top:0;
	bottom:0;
	height:100%;
	left:0;
	width:60px;
	overflow:hidden;
	-webkit-transition:width .05s linear;
	transition:width .05s linear;
	-webkit-transform:translateZ(0) scale(1,1);
	z-index:1000;
}

.main-menu>ul {
	margin:7px 0;
}

.main-menu li {
	position:relative;
	display:block;
	width:250px;
}

.main-menu li>a {
	position:relative;
	display:table;
	border-collapse:collapse;
	border-spacing:0;
	color:#999;
	font-family: arial;
	font-size: 14px;
	text-decoration:none;
	-webkit-transform:translateZ(0) scale(1,1);
	-webkit-transition:all .1s linear;
	transition:all .1s linear;  
}

.main-menu .nav-icon {
	position:relative;
	display:table-cell;
	width:60px;
	height:36px;
	text-align:center;
	vertical-align:middle;
	font-size:18px;
}

.main-menu .nav-text {
	position:relative;
	display:table-cell;
	vertical-align:middle;
	width:190px;
	font-family: 'Poppins', sans-serif;
}

.main-menu>ul.logout {
	position:absolute;
	left:0;
	bottom:0;
}

.no-touch .scrollable.hover {
	overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
	overflow-y:auto;
	overflow:visible;
}

.main-menu {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

.main-menu ul,.main-menu li {
	outline:0;
	margin:0;
	padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
	color:#fff;
	background-color:#00ADEE;
}
.area {
	float: left;
	background: #e2e2e2;
	width: 100%;
	height: 100%;
}

/********** Categorías **********/
.single-category{
	width: calc(25% - 10px);
	margin: 5px;
	background-color: transparent;
	transition: 0.5s;
	position: relative;
	overflow: visible;
}

.category-button i{
	font-size: 5rem;
}

.category-button img{
	width: 5rem;
}

.img-update-cont{
	width: 150px;
	height: 150px;
	padding: 10px;
	background: linear-gradient(to bottom right, rgb(27, 163, 208), #205494);
}

.img-update-cont img{
	width: 100%;
	height: auto;
}

/********** Productos **********/
.table-products-container{
	padding: 10px;
	background: gainsboro;
	border-radius: 10px; 
}

#DT, #DTP{
	background-color: #213132;
}

#DT thead, #DTP thead{
	background-color: #213132;
    color: #fff;
}

.img-product-table{
	width: 75px;
	height: 75px;
	padding: 10px;
	background: linear-gradient(to bottom right, rgb(27, 163, 208), #205494);
}

.img-product-table img{
	width: 100%;
	height: auto;
}

/********** Carrito **********/
.cart-area{
	padding: 10px;
	background: gainsboro;
	border-radius: 10px;
	margin-bottom: 1rem; 
}

.cart-area thead{
	background-color: #213132;
    color: #fff;
}

.product-img-cart{
	max-width: 50px;
}

.separation {
	margin-top: 1em;
}

.shopping-cart-header{
	padding-bottom: 2em;
}

.pay-area table>tbody>tr>td {
	background-color: #eee;
	border-top: 0px solid #ddd;
	border-bottom: 1px solid #ddd;

	padding: 5px 8px;
    vertical-align: middle;
}

.quantity-input{
	width: 60px;
}

.quantity-btn{
	background-color: transparent;
}

/********** User **********/
.user-card{
	padding: 1rem; 
	width: 50%;
	margin: 0 auto; 
}

/* desktop devices (desktop 992px 1199px) */
@media (min-width: 1200px) {
	.single-category{
		width: calc(20% - 10px);
	}
}

/* laptop devices (laptop 992px 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
	.single-category{
		width: calc(25% - 10px);
	}
}

/* tablet devices (tablet 768px 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	/********** Category **********/
	.single-category{
		width: calc(33.33333% - 10px);
	}

	/********** User **********/
	.user-card{
		width: 100%;
	}
}

/* mobile devices (mobile 767px) */
@media only screen and (max-width: 767px) {
	/********** Category **********/
	.single-category{
		width: calc(50% - 10px);
	}
	/********** User **********/
	.user-card{
		width: 100%;
	}
}

/* mobile devices (mobile 500px) */
@media only screen and (max-width: 500px) { 
	/********** Category **********/
	.single-category{
		width: calc(100% - 10px);
	}
	/********** User **********/
	.user-card{
		width: 100%;
	}
}